<template>
  <Form class="xtx-form" v-slot="{ errors }" :validation-schema="schema" ref="formCom">
    <h2>{{ unionId }}</h2>
    <div class="user-info" v-if="userInfo">
      <img :src="userInfo.figureurl_2" alt="" />
      <p>Hi，{{ userInfo.nickname }} 欢迎来小兔鲜，完成绑定后可以QQ账号一键登录哦~</p>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-phone"></i>
        <Field v-model="form.mobile" name="mobile" class="input" type="text" placeholder="绑定的手机号" />
      </div>
      <div class="error">{{ errors.mobile }}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-code"></i>
        <Field v-model="form.code" name="code" class="input" type="text" placeholder="短信验证码" />
        <span @click="sendCodeBtn" class="code">{{ time === 0 ? '发送验证码' : `${time}秒` }}</span>
      </div>
      <div class="error">{{ errors.code }}</div>
    </div>
    <a href="javascript:;" class="submit" @click="submit">立即绑定</a>
  </Form>
</template>

<script>
import { Form, Field } from 'vee-validate'
import schema from '@/utils/vee-validate-schema'
import { useMsgCode, useQQLogin } from '@/hooks'
import { reactive, watch } from 'vue'
import { userQQBindCode, userQQBindLogin } from '@/api/user'
export default {
  name: 'CallbackBind',
  components: { Form, Field },
  props: {
    userInfo: {
      type: Object,
      default: () => ({})
    },
    unionId: {
      type: String,
      default: ''
    }
  },
  setup (props) {
    const form = reactive({
      mobile: '',
      code: '',
      unionId: ''
    })

    // unionId 由父组件传递过来
    watch(() => props.unionId, (unionId) => {
      form.unionId = unionId
    }, { immediate: true })

    // 发送验证码
    const { time, sendCodeBtn } = useMsgCode(form, userQQBindCode)
    // QQ登录
    const { submit, formCom } = useQQLogin(form, userQQBindLogin)

    return { schema, form, time, sendCodeBtn, submit, formCom }
  }
}
</script>

<style scoped lang='less'>
.user-info {
    width: 320px;
    height: 70px;
    margin: 0 auto;
    display: flex;
    background: #f2f2f2;
    align-items: center;
    padding: 0 10px;
    margin-bottom: 25px;
    img {
      background: #f2f2f2;
      width: 50px;
      height: 50px;
    }
    p {
      padding-left: 10px;
    }
  }
  .code {
    position: absolute;
    right: 0;
    top: 0;
    line-height: 50px;
    width: 80px;
    color: #999;
    &:hover {
      cursor: pointer;
    }
  }
</style>
